<template>
	<p-card-flow v-model="cardStatus" behindCardClass="fullscreen_card">
		<view slot="smallCard" class="card1" @click="changeCard">
			<image class="name" src="../../static/image/icon_logo.png"></image>
			<view class="label">离你最近的米其林三星餐厅</view>
			<image class="like" @click.stop="collect" :src="isCollected?'../../static/image/btn_collect_50_select.png':'../../static/image/btn_collect_50.png'"
			 mode=""></image>
		</view>
		<view slot="largeCard" id="card2" class="card2">
			<view class="intro_wrap">
				<view class="intro_title">我们的特色</view>
				<view class="intro_content">Zushi是一家优雅的、非正式的现代化餐厅，早在2000年，我们就获得了米其林星级餐厅的称号，餐厅一直奉行为客人提供最优质的食物和服务的理念，在一定程度上从它身上折射出了现代人的饮食理念——简单、精致。</view>
			</view>
			<view class="food_list">
				<view class="food_item" v-for="(food,index) in foodList" :key="index">
					<view class="food_image_wrap">
						<image class="food_image" :id="'food_image_'+index" :src="food.url" :style="{'margin-left':index==2?'-100rpx':'',transform: 'rotate('+rotate+') scale('+food.scale+')'}"></image>
					</view>
					<view class="food_content">
						<view class="food_name">{{food.name}}</view>
						<uni-rate class="food_rate" readonly :max="5" size="18" margin="8" :value="food.rate"></uni-rate>
						<view class="food_intro">{{food.intro}}</view>
					</view>
				</view>
			</view>
			<view class="btn_list_wrap">
				<p-button type="icon" icon="add"></p-button>
				<p-button type="icon" icon="Favorites2"></p-button>
				<p-button type="icon" icon="zan"></p-button>
			</view>
			<p-button v-if="isLargeCard" type="primary" class="order_btn" @click="order">立即点餐</p-button>
			<view v-if="isLargeCard" class="bottom_mask"></view>
		</view>
	</p-card-flow>
</template>

<script>
	const SMALL_TOP_RATE = 0.3;
	const BIG_TOP_RATE = 0.7;
	let smallTop,bigTop = 0;
		import uniRate from "../../components/uni-rate/uni-rate.vue";
	export default {
		components:{
			uniRate
		},
		computed:{
			isLargeCard(){
				return this.cardStatus==='large';
			}
		},
		data() {
			return {
				scrollHeight:0,
				scrollMaxTop:0,
				isCollected:false,
				rotate:0,
				foodList: [{
					rate: 4,
					intro: "经过28天熟成的红虎虾再通过油封和极速冷冻脱水处理，让味蕾体验不一样的分子料理",
					name: "Honey prawn",
					url: "../../static/image/pic_food_1.png",
					scale:1.3
				}, {
					rate: 5,
					intro: "最高级的挪威三文鱼搭配最新鲜的当季时蔬菜酝酿出极简而又不平淡的顶级菜肴",
					name: "L's Salmon",
					url: "../../static/image/pic_food_2.png",
					scale:1.3
				}, {
					rate: 4.5,
					intro: "方寸之间，可体验人生百味，自开店以来该菜品就是本店最受欢迎菜式之一",
					name: "Sushi Pad",
					url: "../../static/image/pic_food_3.png",
					scale:1.3
				}, {
					rate: 4,
					intro: "来自澳大利亚顶级牧场的5A级菲力牛排配上主厨精心制作的苏格兰威士忌酱汁，味远悠长",
					name: "罗茜尼Filet",
					url: "../../static/image/pic_food_4.png",
					scale:1.3
				}, {
					rate: 5,
					intro: "选用北大西洋吞拿鱼，中国谷饲鸡，地中海藜麦，新西兰牛油果，搭配出具有山海之味的顶级Salad",
					name: "山海Salad",
					url: "../../static/image/pic_food_5.png",
					scale:1.3
				}, {
					rate: 4.5,
					intro: "将今晨最佳的鱼鲜送至您的餐盘上，主厨会根据当天的食材为您搭配最佳的配菜和酱汁",
					name: "Fresh coat of day",
					url: "../../static/image/pic_food_6.png",
					scale:1.3
				}],
				cardStatus:'small',
			}
		},
		created() {
			this.scrollHeight = uni.getSystemInfoSync().windowHeight;
			smallTop = this.scrollHeight*SMALL_TOP_RATE;
			bigTop = this.scrollHeight*BIG_TOP_RATE;
			uni.onNativeEventReceive((event, data) => {})
			
		},
		mounted(){
			const query = uni.createSelectorQuery().in(this);
			query.select("#card2").boundingClientRect(card => {
				this.scrollMaxTop = card.height+140 - this.scrollHeight;
			}).exec();
		},
		onPageScroll(event){
			this.setFoodImageTransform();
			const scrollTop = event.scrollTop;
			let rate = scrollTop / this.scrollMaxTop;
			this.rotate = -90 * rate + "deg";
		},
		methods: {
			//点餐
			order(){
				this.cardStatus = "small";
				uni.navigateTo({
					url:"../voice/voice"
				})
			},
			//收藏
			collect(){
				this.isCollected = ! this.isCollected;
			},
			//改变卡片大小
			changeCard(){
				this.cardStatus = this.cardStatus === "small"?this.cardStatus="large":"small";
			},
			//设置图片大小
			setFoodImageTransform(){
				const query = uni.createSelectorQuery().in(this);
				query.selectAll(".food_image").boundingClientRect(foodImages => {
					foodImages.forEach((image,index) =>{
						if(image.top<0||image.top>this.scrollHeight){
							return;
						}
						if(image.top<smallTop){
							//缩小
							this.foodList[index].scale = (image.top/smallTop)*SMALL_TOP_RATE+1;
							// console.log(index+":"+image.top+":变小"+this.foodList[index].scale)
						}else if(image.top>bigTop){
							//放大
							this.foodList[index].scale = ((this.scrollHeight-image.top)/smallTop)*SMALL_TOP_RATE+1;
							// console.log(index+"变大:"+this.foodList[index].scale)
						}else{
							// console.log(index+"不变:"+this.foodList[index].scale)
							this.foodList[index].scale = 1.3;
						}
					})
				}).exec();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card1{
		position: relative;
		width: 100%;
		height: 100%;
		transition: all 1s;
		background-image: url("../../static/image/bg_card1.png");
		background-size: cover;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		.name {
			position: absolute;
			left: 60rpx;
			bottom: 130rpx;
			width: 400rpx;
			height: 160rpx;
			transition: all 1s;
			animation: nameAn 0.8s ease;
		}
		
		.label {
			position: absolute;
			left: 60rpx;
			bottom: 60rpx;
			opacity: 0.8;
			font-family: $font_family_regular;
			font-size: 32rpx;
			color: $h1_dark;
			letter-spacing: 0;
			line-height: 50rpx;
			transition: all 1s;
			animation: labelAn 0.8s ease;
		}
		
		.like {
			position: absolute;
			bottom: 35rpx;
			right: 30rpx;
			width: 100rpx;
			height: 100rpx;
			transition: bottom 1s;
		}
	}
	.card2 {
			padding-bottom: 300rpx;
			position: relative;
			z-index: 100;
			border-radius: 80rpx 80rpx 0 0;
			opacity: 1;
			transition: all 1s;
			background-color: #FFFFFF;
	
			.intro_wrap {
				padding: 60rpx;
	
				.intro_title {
					margin-top: 10rpx;
					font-size: $font_size_title_medium;
					color: #333;
				}
	
				.intro_content {
					font-family: $font_family_regular;
					margin-top: 30rpx;
					font-size: 32rpx;
					line-height: 50rpx;
					color: #838383;
				}
			}
	
			.food_list {
				.food_item {
					height: 480rpx;
					display: flex;
					justify-content: center;
					align-items: center;
	
					&+.food_item {
						margin-top: 30rpx;
					}
					.food_image_wrap{
						display: flex;
						justify-content: center;
						align-items: center;
							width: 500rpx;
							height: 480rpx;
							margin-left: -120rpx;
						.food_image {
							width: 385rpx;
							height: 370rpx;
						}	
					}
	
					.food_content {
						height: 100%;
						flex: 1;
						overflow: hidden;
						.food_name {
							margin-top: 20rpx;
							font-size: $font_size_medium;
							color: #333;
						}
	
						.food_rate {
							margin-top: 20rpx;
						}
	
						.food_intro {
							margin-top: 20rpx;
							width: 260rpx;
							font-family: $font_family_regular;
							font-size: 32rpx;
							color: #838383;
							letter-spacing: 0;
							text-align: justify;
							line-height: 50rpx;
							white-space: break-spaces;
						}
					}
	
					&:nth-child(even) {
						flex-direction: row-reverse;
						.food_image_wrap{
							margin-left: 0;
							margin-right: -180rpx;
						}
						.food_content {
							padding-right: 0;
							padding-left: 80rpx;
						}
					}
				}
			}
	
			.btn_list_wrap {
				padding: 0 90rpx;
				margin-top: 100rpx;
				display: flex;
				justify-content: space-between;
			}
		}
	.fullscreen_card{
		.card1 {
			background-position: 50% 80%;
		
			.name {
				width: 210rpx;
				height: 80rpx;
				left: 90rpx;
				bottom: 140rpx;
			}
		
			.label {
				left: 90rpx;
				bottom: 90rpx;
				font-size: $font_size_extra_small;
			}
		
			.like {
				bottom: 80rpx;
			}
		}
	}
	
	.bottom_mask {
		position: fixed;
		z-index: 200;
		width: 100%;
		bottom: 0;
		left: 0;
		height: 300rpx;
		background-image: linear-gradient(0, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
		opacity: 0;
		animation: showAn 0.8s ease 1s forwards;
	}
	.order_btn {
		position: fixed;
		left: 50%;
		bottom: 60rpx;
		transform: translateX(-50%);
		animation: showAn 0.8s ease 1s forwards;
		opacity: 0;
		z-index: 500;
	}
	@keyframes nameAn {
		0% {
			bottom: -20rpx;
		}
	
		90% {
			bottom: 140rpx
		}
	
		100% {
			bottom: 130rpx;
		}
	}
	
	@keyframes labelAn {
		0% {
			bottom: -60rpx;
		}
	
		90% {
			bottom: 70rpx
		}
	
		100% {
			bottom: 60rpx;
		}
	}
</style>
